<template>
    <div class="Detailed">
      <header>
        <p><router-link to="/Balance"><img src="../../static/img/transfer/contact_06.jpg">返回</router-link></p>
        <p>收支明细</p>
        <p><router-link to="/Setting"><span>?</span></router-link></p>
      </header>
      <section>
        <p>
          <span>交易退款</span>
          <span>2018-03-30</span>
        </p>
        <p>
          <span>余额： 2207.55</span>
          <span>+314.01</span>
        </p>
      </section>
      <section>
        <p>
          <span>提现</span>
          <span>2018-03-27</span>
        </p>
        <p>
          <span>余额： 1893.55</span>
          <span>-1</span>
        </p>
      </section>
      <section>
        <p>
          <span>充值到余额</span>
          <span>2018-03-26</span>
        </p>
        <p>
          <span>余额： 1894.55</span>
          <span>+1</span>
        </p>
      </section>
      <section>
        <p>
          <span>充值到余额</span>
          <span>2018-03-25</span>
        </p>
        <p>
          <span>余额： 1893.54</span>
          <span>+1</span>
        </p>
      </section>
      <section>
        <p>
          <span>转账</span>
          <span>2018-03-24</span>
        </p>
        <p>
          <span>余额： 1894.54</span>
          <span>-100</span>
        </p>
      </section>
      <section>
        <p>
          <span>在线支付</span>
          <span>2018-03-23</span>
        </p>
        <p>
          <span>余额： 1994.54</span>
          <span>-7</span>
        </p>
      </section>
      <section>
        <p>
          <span>提现</span>
          <span>2018-03-27</span>
        </p>
        <p>
          <span>余额： 1893.55</span>
          <span>-1</span>
        </p>
      </section>
      <section>
        <p>
          <span>充值到余额</span>
          <span>2018-03-26</span>
        </p>
        <p>
          <span>余额： 1894.55</span>
          <span>+1</span>
        </p>
      </section>
      <section>
        <p>
          <span>充值到余额</span>
          <span>2018-03-25</span>
        </p>
        <p>
          <span>余额： 1893.54</span>
          <span>+1</span>
        </p>
      </section>
      <section>
        <p>
          <span>转账</span>
          <span>2018-03-24</span>
        </p>
        <p>
          <span>余额： 1894.54</span>
          <span>-100</span>
        </p>
      </section>
    </div>
</template>

<script>
    export default {
        name: "Detailed"
    }
</script>

<style scoped>
  .Detailed{
    background: white;
  }
  header{
    display: flex;
    font-size: 1.2rem;
    background: #fff;
    border-bottom: 1px solid #ddd;
    margin-bottom: .6rem;
    justify-content: space-between;
    padding: .8rem;
    align-items: center;
  }
  header p:nth-child(2){
    font-weight: bold;
    margin-right: .7rem;
  }
  header p:nth-child(1) a, header p:nth-child(3) a{
    font-size: 1rem;
    color: #108ee9;
    display: block;
  }
  header p:nth-child(1) a img{
    width: .8rem;
    height: 1.2rem;
    margin-right: .3rem;
  }
  header p:nth-child(3) a span{
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: 1px solid #108ee9;
    color:#108ee9;
    font-size: 1rem;
    text-align: center;
    line-height: 1.3rem;
  }
  section{
    padding: .3rem .8rem ;
    border-bottom: 1px solid #ddd;
  }
  section p{
    line-height: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  section p:first-child span:first-child{
     font-size: 1rem;
   }
  section p:first-child span:last-child{
    font-size: .8rem;
    color: #a1a1a1;
  }
  section p:last-child span:first-child{
    font-size: .8rem;
  }
  section p:last-child span:last-child{
    font-size: 1.2rem;
    font-weight: bold;

  }
</style>
